<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="3" :xs="24">
        <el-input v-model="lineName" placeholder="请输入产线名称" clearable size="small" prefix-icon="el-icon-search"
                  style="margin-bottom: 20px" />
        <el-tree ref="tree"  :data="lineTreeLists" :props="defaultProps"  :default-checked-keys="checkDefaultLine"
                 :default-expand-all="true" node-key="id" highlight-current @node-click="lineClick" />
      </el-col>
      <el-col :span="21" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="产品类型" prop="productTypeId">
            <el-select v-model="queryParams.productTypeId" placeholder="请选择产品类型" clearable>
              <el-option
                v-for="param in productLists"
                :key="param.value"
                :label="param.label"
                :value="param.value"
              />
            </el-select>
          </el-form-item>
          <!--      <el-form-item label="动作ID" prop="actionId">-->
          <!--        <el-input-->
          <!--          v-model="queryParams.actionId"-->
          <!--          placeholder="请输入动作ID"-->
          <!--          clearable-->
          <!--          @keyup.enter.native="handleQuery"-->
          <!--        />-->
          <!--      </el-form-item>-->
          <el-form-item label="设备" prop="deviceId">
            <el-select v-model="queryParams.deviceId" placeholder="请选择设备" clearable>
              <el-option
                v-for="param in deviceLists"
                :key="param.id"
                :label="param.deviceName"
                :value="param.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <!--    <el-row :gutter="10" class="mb8">-->
        <!--      <el-col :span="1.5">-->
        <!--        <el-button-->
        <!--          type="primary"-->
        <!--          plain-->
        <!--          icon="el-icon-plus"-->
        <!--          size="mini"-->
        <!--          @click="handleAdd"-->
        <!--          v-hasPermi="['action:plan:add']"-->
        <!--        >新增</el-button>-->
        <!--      </el-col>-->
        <!--      <el-col :span="1.5">-->
        <!--        <el-button-->
        <!--          type="success"-->
        <!--          plain-->
        <!--          icon="el-icon-edit"-->
        <!--          size="mini"-->
        <!--          :disabled="single"-->
        <!--          @click="handleUpdate"-->
        <!--          v-hasPermi="['action:plan:edit']"-->
        <!--        >修改</el-button>-->
        <!--      </el-col>-->
        <!--      <el-col :span="1.5">-->
        <!--        <el-button-->
        <!--          type="danger"-->
        <!--          plain-->
        <!--          icon="el-icon-delete"-->
        <!--          size="mini"-->
        <!--          :disabled="multiple"-->
        <!--          @click="handleDelete"-->
        <!--          v-hasPermi="['action:plan:remove']"-->
        <!--        >删除</el-button>-->
        <!--      </el-col>-->
        <!--      <el-col :span="1.5">-->
        <!--        <el-button-->
        <!--          type="warning"-->
        <!--          plain-->
        <!--          icon="el-icon-download"-->
        <!--          size="mini"-->
        <!--          @click="handleExport"-->
        <!--          v-hasPermi="['action:plan:export']"-->
        <!--        >导出</el-button>-->
        <!--      </el-col>-->
        <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
        <!--    </el-row>-->

        <el-table v-loading="loading" :data="planList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <!--      <el-table-column label="主键" align="center" prop="id" />-->
          <!--      <el-table-column label="部门ID" align="center" prop="deptId" />-->
          <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>
          <el-table-column label="二级产线" align="center" prop="twoLineId" :formatter="twoLineFormatter" />
          <el-table-column label="三级产线" align="center" prop="threeLineId" width="200"  :formatter="threeLineFormatter" />
          <el-table-column label="产品类型" align="center" prop="productTypeId" :formatter="productFormatter" />
          <el-table-column label="动作编号" align="center" prop="weldNo"  />
          <el-table-column label="焊缝区域X-Y" align="center" prop="weldZoneXY"  />
<!--          <el-table-column label="焊缝区域Y" align="center" prop="weldZoneY"  />-->
          <el-table-column label="焊缝姿态" align="center" prop="weldAttitude"  :formatter="weldAttitudeFormatter"  />
          <el-table-column label="焊缝长度" align="center" prop="weldLength"  />
          <el-table-column label="设备" align="center" prop="deviceId" :formatter="deviceFormatter" />
          <el-table-column label="动作顺序" align="center" prop="deviceActionOrder" />
          <el-table-column label="备注" align="center" prop="remark" />
          <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
          <!--        <template slot-scope="scope">-->
          <!--          <el-button-->
          <!--            size="mini"-->
          <!--            type="text"-->
          <!--            icon="el-icon-edit"-->
          <!--            @click="handleUpdate(scope.row)"-->
          <!--            v-hasPermi="['action:plan:edit']"-->
          <!--          >修改</el-button>-->
          <!--          <el-button-->
          <!--            size="mini"-->
          <!--            type="text"-->
          <!--            icon="el-icon-delete"-->
          <!--            @click="handleDelete(scope.row)"-->
          <!--            v-hasPermi="['action:plan:remove']"-->
          <!--          >删除</el-button>-->
          <!--        </template>-->
          <!--      </el-table-column>-->
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

      </el-col>
    </el-row>

    <!-- 添加或修改动作排产（规则）对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="部门ID" prop="deptId">
          <el-input v-model="form.deptId" placeholder="请输入部门ID" />
        </el-form-item>
        <el-form-item label="产品类型ID" prop="productTypeId">
          <el-input v-model="form.productTypeId" placeholder="请输入产品类型ID" />
        </el-form-item>
        <el-form-item label="动作ID" prop="actionId">
          <el-input v-model="form.actionId" placeholder="请输入动作ID" />
        </el-form-item>
        <el-form-item label="设备ID" prop="deviceId">
          <el-input v-model="form.deviceId" placeholder="请输入设备ID" />
        </el-form-item>
        <el-form-item label="每个设备的动作顺序" prop="deviceActionOrder">
          <el-input v-model="form.deviceActionOrder" placeholder="请输入每个设备的动作顺序" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listPlan, getPlan, delPlan, addPlan, updatePlan } from "@/api/zndd/action/plan";
import { listProducttype } from '@/api/zndd/product/producttype'
import { listAllSet } from '@/api/zndd/line/set'
import { listAllDetails } from '@/api/zndd/line/details'
import { listDevice, listDeviceByThreeLineId } from '@/api/zndd/device/device'
import { listAction } from '@/api/zndd/action/action'
import { listParameter } from '@/api/zndd/action/parameter'

export default {
  name: "Plan",
  data() {
    return {
      deviceLists:[],
      productLists:[],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      lineName: null,
      lineTreeLists:[],
      checkDefaultLine:[],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 动作排产（规则）表格数据
      planList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        twoLineId: null,
        threeLineId: null,
        deptId: null,
        productTypeId: null,
        actionId: null,
        deviceId: null,
        deviceActionOrder: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      actionLists:[],
      twoLines:[],
      threeLines:[],
    };
  },
  created() {
    // this.getList();
    this.getLineDetalisList();
    this.getProductLists();
    this.getweldAttitudeList();
    this.getActionLists();
    this.getTwoList();
    this.getThreeList();
  },
  methods: {
    getweldAttitudeList(){
      listParameter({pageNum:1,pageSize:1000}).then(response => {
        this.weldAttitudeList = response.rows;
      });
    },
    /** 查询动作排产（规则）列表 */
    getList() {
      listPlan(this.queryParams).then(response => {
        this.planList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        deptId: null,
        productTypeId: null,
        actionId: null,
        deviceId: null,
        deviceActionOrder: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加动作排产（规则）";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getPlan(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改动作排产（规则）";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updatePlan(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPlan(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除动作排产（规则）编号为"' + ids + '"的数据项？').then(function() {
        return delPlan(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('action/plan/export', {
        ...this.queryParams
      }, `plan_${new Date().getTime()}.xlsx`)
    }, /** 序号 */
    indexMethod(index) {
      let pageNum = this.queryParams.pageNum - 1;
      if (pageNum !== -1 && pageNum !== 0) {
        return (index + 1) + (pageNum * this.queryParams.pageSize);
      } else {
        return index + 1;
      }
    },lineClick(data){
      // console.log(data)
      this.queryParams.threeLineId=data.id;
      this.getDeviceLists();
      this.getList();
    },//查询二级产线信息
    getLineDetalisList(){
      listAllDetails().then(response => {
        this.detailsList = response.rows;
        this.getLineSetList();
      });
    },//查询三级产线信息
    getLineSetList(){
      listAllSet().then(response => {
        var list = [];
        this.detailsList.forEach(details => {
          var sets = [];
          response.rows.forEach(row => {
            if(details.id == row.lineId){
              sets.push({
                label:row.threeLineName,
                value:row.lineNo,
                lineId:row.lineId,
                id:row.id,
              });
            }
          });
          list.push({
            id:details.id,
            label:details.sonLineName,
            value:details.lineNo,
            children:sets
          });
        });
        this.lineTreeLists = list;
        this.queryParams.threeLineId=this.lineTreeLists[0].children[0].id;
        this.queryParams.twoLineId=this.lineTreeLists[0].id;
        this.$nextTick(()=>{
          this.$refs.tree.setCurrentKey(this.lineTreeLists[0].children[0].id);
        })
        // this.lineClick(this.lineTreeLists[0].children[0].id);
        this.getDeviceLists();
        this.getList();

      });
    },getProductLists(){
      listProducttype({pageNum:1,pageSize:1000}).then(response => {
        var list = [];
        response.rows.forEach(row => {
          list.push({
            label: row.productTypeName,
            value: row.id,
            id: row.id,
          })
        });
        this.productLists=list;
      });
    },getDeviceLists(){
      listDeviceByThreeLineId(this.queryParams.threeLineId).then(response => {
        this.deviceLists=response;
      });
    },getActionLists(){
      listAction({pageNum:1,pageSize:500}).then(response => {
        var list = [];
        response.rows.forEach(row => {
          list.push({
            label: row.weldNo,
            value: row.id,
            id: row.id,
          })
        });
        this.actionLists=list;
      });
    },deviceFormatter(row){
      var lt = null;
      this.deviceLists.forEach(device => {
        if(device.id == row.deviceId){
          lt = device;
        }
      });
      return lt.deviceName;
    },productFormatter(row){
      var lt = null;
      this.productLists.forEach(product => {
        if(product.value == row.productTypeId){
          lt = product;
        }
      });
      return lt.label;
    },weldAttitudeFormatter(row){
      var lt = null;
      this.weldAttitudeList.forEach(weldAttitude => {
        if(weldAttitude.id == row.weldAttitude){
          lt = weldAttitude;
        }
      });
      return lt.weldingAttitude;
    },twoLineFormatter(row){
      var lt = null;
      this.twoLines.forEach(two => {
        if(two.id == row.twoLineId){
          lt = two;
        }
      });
      return lt.lineNo+"("+lt.sonLineName+")";
    },threeLineFormatter(row){
      var lt = null;
      this.threeLines.forEach(three => {
        if(three.id == row.threeLineId){
          lt = three;
        }
      });
      return lt.lineNo+"("+lt.threeLineName+")";
    },//查询二级产线信息
    getTwoList(){
      listAllDetails({pageNum:1,pageSize:1000}).then(response => {
        this.twoLines = response.rows;
      });
    },//查询三级产线信息
    getThreeList() {
      listAllSet({pageNum:1,pageSize:1000}).then(response => {
        this.threeLines = response.rows;
      });
    }
  }
};
</script>


<style lang="css" scoped>
::v-deep .el-tree-node__content:hover{
  background-color: #409EFF;
  color: #ffffff;
}
::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
  background-color: #409EFF;
  color: #ffffff;
}
</style>
